<template>
  <div class="home-container">
    <!-- 轮播图部分 -->
    <el-carousel :interval="5000" height="400px" arrow="always" class="home-carousel">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <div class="carousel-content" :style="{ backgroundImage: `url(${item.image})` }">
          <div class="carousel-overlay">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 主卡片内容 -->
    <el-card class="home-card" shadow="hover">
      <div class="home-header">
        <h2>心理咨询管理系统</h2>
        <p class="subtitle">高效管理咨询流程，助力心理服务数字化</p>
        <el-divider class="divider" />
      </div>

      <div class="home-stats">
        <div class="stat-item" v-for="(stat, index) in stats" :key="index">
          <div class="stat-icon">
            <component :is="stat.icon" />
          </div>
          <span class="stat-value">{{ stat.value }}</span>
          <span class="stat-label">{{ stat.label }}</span>
        </div>
      </div>

      <div class="home-desc">
        <p>本系统支持线上/线下预约登记、咨询过程全流程管理、咨询师资源统筹，帮助中心前台助理高效处理心理服务事务，为学生提供更便捷的心理咨询通道。</p>
      </div>
    </el-card>

    <!-- 特色功能展示 -->
    <div class="features-section">
      <h3 class="section-title">系统特色功能</h3>
      <el-divider />
      <div class="features-grid">
        <div class="feature-card" v-for="(feature, index) in features" :key="index">
          <div class="feature-icon" :style="{ backgroundColor: feature.color }">
            <component :is="feature.icon" />
          </div>
          <h4>{{ feature.title }}</h4>
          <p>{{ feature.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  House,
  User,
  Calendar,
  Check,
  ArrowRight,
  ChatRound,
  Notebook,
  Setting,
  DataAnalysis,
  Lock
} from '@element-plus/icons-vue'
import img1 from '../../assets/liu.jpg'

const router = useRouter()

const carouselItems = ref([
  {
    title: '专业心理咨询服务',
    description: '为您提供安全、私密的心理咨询环境',
    image: img1
  },
  {
    title: '数字化管理平台',
    description: '高效管理咨询流程，提升服务质量',
    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
  },
  {
    title: '多平台预约系统',
    description: '随时随地预约心理咨询服务',
    image: 'https://images.unsplash.com/photo-1521791055366-0d553872125f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
  }
])

const stats = ref([
  { icon: User, value: '120+', label: '累计咨询预约', color: '#4CAF50' },
  { icon: Calendar, value: '4', label: '专业咨询师', color: '#8BC34A' },
  { icon: Check, value: '98%', label: '预约完成率', color: '#CDDC39' },
  { icon: ChatRound, value: '4.9/5.0', label: '用户满意度', color: '#FFC107' }
])

const features = ref([
  {
    icon: Notebook,
    title: '预约管理',
    description: '便捷的线上/线下预约系统，实时查看预约状态',
    color: '#4CAF50'
  },
  {
    icon: DataAnalysis,
    title: '数据分析',
    description: '可视化数据分析，帮助优化咨询服务',
    color: '#8BC34A'
  },
  {
    icon: Setting,
    title: '流程定制',
    description: '灵活配置咨询流程，适应不同需求',
    color: '#CDDC39'
  },
  {
    icon: Lock,
    title: '隐私保护',
    description: '严格的数据加密措施，保障用户隐私',
    color: '#FFC107'
  }
])

const goToAppointment = () => {
  router.push('/appointment')
}
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f7fa;
}

.home-carousel {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-content {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

.carousel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  color: white;
}

.carousel-overlay h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.carousel-overlay p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.home-card {
  margin: 20px 0;
  padding: 40px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.95);
  border: none;
}

.home-header {
  text-align: center;
  margin-bottom: 30px;
}

.home-header h2 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: #2E7D32;
  font-weight: 600;
}

.subtitle {
  font-size: 1.1rem;
  color: #689F38;
  margin-bottom: 20px;
}

.divider {
  width: 80px;
  margin: 20px auto;
  background-color: #4CAF50;
  height: 3px;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  background-color: white;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 2rem;
  margin-bottom: 15px;
  color: #4CAF50;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  color: #2E7D32;
}

.stat-label {
  font-size: 1rem;
  color: #689F38;
}

.home-desc {
  text-align: center;
  margin-top: 30px;
}

.home-desc p {
  margin-bottom: 30px;
  line-height: 1.8;
  font-size: 1.1rem;
  color: #616161;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.action-button {
  padding: 12px 30px;
  font-size: 1.1rem;
  border-radius: 30px;
  background-color: #4CAF50;
  border-color: #4CAF50;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
  transition: all 0.3s ease;
}

.action-button:hover {
  transform: translateY(-2px);
  background-color: #43A047;
  border-color: #43A047;
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

.features-section {
  margin: 60px 0;
  padding: 30px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-title {
  text-align: center;
  font-size: 1.8rem;
  color: #2E7D32;
  margin-bottom: 20px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.feature-card {
  background: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #E8F5E9;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.8rem;
}

.feature-card h4 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #2E7D32;
}

.feature-card p {
  color: #689F38;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .home-stats {
    grid-template-columns: 1fr 1fr;
  }

  .carousel-overlay h2 {
    font-size: 1.8rem;
  }

  .carousel-overlay p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .home-stats {
    grid-template-columns: 1fr;
  }

  .home-card {
    padding: 20px;
  }
}
</style>